<template>
	<view class="page">
		<l-loading v-if="!loadEnd" />
		<template v-else>
			<no-data :center="true" v-if="loadEnd && listData.length === 0" title="还没有添加商品哦~" />
			<template v-else>
				<view class="list-box">
					<uni-swipe-action>
					    <uni-swipe-action-item 
						v-for="(item,index) in listData"
						:key="item.rec_id"
						:right-options="options" 
						@click="onSwipeClick" 
						@change="swipeChange($event, index)">
							<view class="item-box">
								<view class="item-left" @tap.stop="goDetail(item.goods_id)">
									<view @tap.stop="onCheckBox(index,item.rec_id,item.is_checked)">
										<uni-icons
										v-if="item.is_checked === 'true'"
										type="checkbox-filled" 
										size="42rpx" 
										color="#FC2422"></uni-icons>
										<uni-icons v-else type="circle" size="42rpx" color="#999999"></uni-icons>
									</view>
									<view class="goods-cover">
										<image class="goods-cover_img" :src="item.goods_thumb"></image>
									</view>
									<view class="goods-desc">
										<view class="goods-desc_name u-line-1">
											{{item.goods_name}}
										</view>
										<view class="goods-desc_price u-line-1">
											￥{{item.goods_price}}
										</view>
									</view>
								</view>
								<view class="item-right">
									<u-number-box 
									buttonSize="50rpx"
									:integer="true"
									:name="index"
									:min="1"
									inputWidth="72rpx"
									v-model="item.goods_number"
									@blur="numberBlur"
									@change="numberChange"></u-number-box>
								</view>
							</view>
					    </uni-swipe-action-item>
					</uni-swipe-action>
				</view>
				<view class="bottom-box">
					<view class="left-box">
						<view
						class="all-select"
						 @tap="allCheckChange"
						:class="allDisabled ? 'disabled' : ''">
							<uni-icons
							v-if="allCheck === true"
							type="checkbox-filled" 
							size="46rpx" 
							color="#FC2422"></uni-icons>
							<uni-icons v-else type="circle" size="46rpx" color="#999999"></uni-icons>
							<text class="label">全选(0)</text>
						</view>
					</view>
					<view class="right-box">
						<text class="all-price">￥{{totalObj.check_goods_price ? totalObj.check_goods_price : 0}}</text>
						<u-button
						@click="onSubmit"
						 customStyle="width: 200rpx;"
						color="#FC2422" 
						text="下单" 
						:disabled="allDisabled"></u-button>
					</view>
				</view>
			</template>
		</template>
		<tab-bar/>
	</view>
</template>

<script>
	import {getCartListApi,delCartApi, selectCartApi,updateCartApi} from '@/api/goods.js'
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['hasLogin','user_id','token']),
			allDisabled: function() {
				// 考虑到0元商品
				for (let i = 0; i < this.listData.length; i++) {
					if(this.listData[i].is_checked) {
						return false
					}
				}
				return true
			}
		},
		data() {
			return {
				allCheck: false,
				checkList: [],
				options:[{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				listData: [],
				totalObj: {},
				currentGoodsIndex: 0,
				loadEnd: false
			}
		},
		onLoad() {
			uni.hideTabBar()
			// this.getCartList()
		},
		onShow() {
			this.getCartList()
		},
		methods: {
			// 下单
			async onSubmit() {
				// 判断是否登录
				if(!this.hasLogin) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					},300)
					return
				}
				// 判断是否选择商品
				let isSelect = false
				for (let i = 0; i < this.listData.length; i++) {
					if(this.listData[i].is_checked === 'true') {
						uni.navigateTo({
							url: `/pages/aPackage/orderConfirm/orderConfirm`
						})
					}else {
						uni.showToast({
							title: '请勾选商品',
							icon: 'none'
						})
					}
				}
			},
			// 获取列表
			async getCartList() {
				if(!this.hasLogin) {
					this.loadEnd = true
					return
				}
				const res = await getCartListApi({
					user_id: this.user_id,
					token: this.token
				})
				this.loadEnd = true
				const {goods_list = [], total = {}} = res.data.info
				this.listData = goods_list
				this.totalObj = total
				let allCheck = false
				for (let i = 0; i < goods_list.length; i++) {
					if(goods_list[i].is_checked === 'false') {
						allCheck = false
						return
					}else {
						allCheck = true
					}
				}
				this.allCheck = allCheck
			},
			async onSwipeClick(e){
				const res = await delCartApi({
					id: this.listData[this.currentGoodsIndex].rec_id,
					user_id: this.user_id,
					token: this.token
				})
				this.listData.splice(this.currentGoodsIndex,1)
			},
			swipeChange(e,index){
			  this.currentGoodsIndex = index
			},
			// 跳详情
			goDetail(goods_id) {
				if(!goods_id) return
				uni.navigateTo({
					url: `/pages/aPackage/goodsDetail/goodsDetail?goods_id=${goods_id}`,
					animationType: 'fade-in'
				})
			},
			onCheckBox(index,id,isChecked) {
				this.setCheckStatus(id,isChecked == 'true' ? 'false' : 'true')
				this.listData[index].is_checked = isChecked === 'true' ? 'false' : 'true'
			},
			async setCheckStatus(id,isChecked) {
				const res = await selectCartApi({
					user_id: this.user_id,
					token: this.token,
					id: id,
					ischecked: isChecked === 'true' ? 1 : 0 // 1或0
				})
				this.totalObj.check_goods_price = res.data.data.total.check_goods_price
				this.$nextTick(() => {
					let allCheck = false
					for (let i = 0; i < this.listData.length; i++) {
						if(this.listData[i].is_checked === 'false') {
							allCheck = false
							this.allCheck = allCheck
							return
						}else {
							allCheck = true
						}
					}
					this.allCheck = allCheck
				})
			},
			numberBlur(e) {
				const {value,name} = e
				if(!value) {
					uni.showToast({
						title: '数量不能小于等于0',
						icon: 'none'
					})
					this.listData[name].goods_number = 1
				}
			},
			async numberChange({value = 1, name = null}) {
				if(!value) return
				const res = await updateCartApi({
					goods_id: this.listData[name].goods_id,
					number: value,
					user_id: this.user_id,
					token: this.token,
					product_id: this.listData[name].product_id
				})
				this.getCartList()
				if(!res.data.update_cart) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			allCheckChange() {
				if(!this.allCheck) {
					this.listData.forEach(async (item,index) => {
						if(item.is_checked === 'false') {
							item.is_checked = 'true'
							this.setCheckStatus(item.rec_id,'true') 
						}
					})
					this.allCheck = true
				}else {
					this.listData.forEach((item,index) => {
						item.is_checked = 'false'
						this.setCheckStatus(item.rec_id,'false')
					})
					this.allCheck = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		padding-bottom: 150rpx;
	}
	.item-box {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		width: 750rpx;
		overflow: hidden;
		.item-left {
			display: flex;
			align-items: center;
			.goods-cover {
				&_img {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.goods-desc {
				width: 360rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				&_name {
					font-size: 28rpx;
					color: #333333;
				}
				&_price {
					font-size: 28rpx;
					color: #FC2422;
					margin-top: 10rpx;
				}
			}
		}
		.item-right {
			/deep/.u-number-box__plus {
				width: 50rpx;
			}
			/deep/.u-number-box__minus {
				width: 50rpx;
			}
		}
		
	}
	.bottom-box {
		position: fixed;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 80rpx;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		z-index: 2;
		.left-box {
			.all-select {
				display: flex;
				align-items: center;
				.label {
					font-size: 28rpx;
					color: #333333;
					margin-left: 10rpx;
				}
			}
			.disabled {
				.label {
					color: #999999;
				}
			}
			
		}
		.right-box {
			display: flex;
			align-items: center;
			.all-price {
				font-size: 28rpx;
				color: #FC2422;
				margin-right: 20rpx;
			}
		}
	}
</style>